<template>
  <div
    class="image-upload"
    @dragover.prevent
    @dragenter.prevent
    @drop.prevent="handleDrop"
  >
    将图片拖拽至此处上传
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'ImageUpload',
  methods: {
    handleDrop(event) {
      const files = event.dataTransfer.files;
      const file = files[0];
      if (file) {
        this.uploadImage(file);
      }
    },
    async uploadImage(file) {
      const formData = new FormData();
      formData.append('file', file);

      try {
        const response = await axios.post('http://zhongjianyu.cat.com/uploadImage', formData, {
          headers: {
            'Content-Type': 'multipart/form-data',
          },
        });
        // 假设你的接口返回了图片的URL
        const imageUrl = response.data.url;
        // 将图片插入到编辑器中，这里需要调用v-md-editor提供的插入图片的方法
        this.$emit('upload-success', imageUrl);
      } catch (error) {
        console.error('图片上传失败', error);
      }
    },
  },
};
</script>

<style scoped>
.image-upload {
  border: 2px dashed #ccc;
  padding: 20px;
  text-align: center;
  cursor: pointer;
}
</style>